<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%@ page import="org.jbit.bean.*,org.jbit.biz.*,org.jbit.dao.*,org.jbit.vo.*"%>
<%
 String ModuleMark =request.getParameter("ModuleMark");
 GPSInfoListAction GA = new GPSInfoListAction();
 List<GPSInfoVo> list=new ArrayList<GPSInfoVo>();
 list=GA.getGPSInfoListShow(ModuleMark);
%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C29OafEY0zdSpGlDpWCQDlYf"></script>
	<title>痕迹标记</title>
	
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
	<script type="text/javascript">
		var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
        var point = new BMap.Point(116.467509,40.212677);//定义一个中心点坐标
        map.centerAndZoom(point,9);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
		map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
		
		
	var bounds = null;
	var linesPoints = null;
	var spoi=new Array();
	
	 var latitudeList = new Array();
	 var longitudeList = new Array();
	
	
    <%for(int j=0;j<list.size();j++)
    {
     GPSInfoVo info=new GPSInfoVo();
	 info=list.get(j);
	 %>
	 latitudeList.push(<%=info.getLatitude()%>);
	 longitudeList.push(<%=info.getLongitude()%>);
	 <%
    }
    %>
	for (var i=0;i<<%=list.size()%>;i++)
	{
	var Latitude=latitudeList[i];
	var Longitude=longitudeList[i];
	spoi[i] = new BMap.Point(parseFloat(Longitude),parseFloat(Latitude));

	}
	
	var myIcon = new BMap.Icon("../images/bus.png", new BMap.Size(50, 29), {imageOffset: new BMap.Size(0, 0)});
	function initLine(){
		bounds = new Array();
		linesPoints = new Array();
		map.clearOverlays();  // 清空覆盖物
   for (var i=0;i<<%=list.size()-1%>;)
	{
	var driving = new BMap.DrivingRoute(map,{onSearchComplete:drawLine});  // 驾车实例,并设置回调
			driving.search(spoi[i], spoi[++i]); 
	}		
		
	}
	function run(){
		for(var m = 0;m < linesPoints.length; m++){
			var pts = linesPoints[m];
			var len = pts.length;
			var carMk = new BMap.Marker(pts[0],{icon:myIcon});
			map.addOverlay(carMk);
			resetMkPoint(1,len,pts,carMk);
		}
		
		function resetMkPoint(i,len,pts,carMk){
			carMk.setPosition(pts[i]);
			if(i < len){
				setTimeout(function(){
					i++;
					resetMkPoint(i,len,pts,carMk);
				},100);
			}
		}
		
	}
	function drawLine(results){
		var opacity = 0.45;
		var planObj = results.getPlan(0);
		var b = new Array();
		var addMarkerFun = function(point,imgType,index,title){
			var url;
			var width;
			var height;
			var myIcon;
			// imgType:1的场合，为起点和终点的图；2的场合为车的图形
			if(imgType == 1){
				url = "http://developer.baidu.com/map/jsdemo/img/dest_markers.png";
				width = 42;
				height = 34;
				myIcon = new BMap.Icon(url,new BMap.Size(width, height),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - index * height)});
			}else{
				url = "http://developer.baidu.com/map/jsdemo/img/trans_icons.png";
				width = 22;
				height = 25;
				var d = 25;
				var cha = 0;
				var jia = 0;
				if(index == 2){
					d = 21;
					cha = 5;
					jia = 1;
				}
				myIcon = new BMap.Icon(url,new BMap.Size(width, d),{offset: new BMap.Size(10, (11 + jia)),imageOffset: new BMap.Size(0, 0 - index * height - cha)});
			}
			
			var marker = new BMap.Marker(point, {icon: myIcon});
			if(title != null && title != ""){
				marker.setTitle(title);
			}
			// 起点和终点放在最上面
			if(imgType == 1){
				marker.setTop(true);
			}
			map.addOverlay(marker);
		};
		var addPoints = function(points){
			for(var i = 0; i < points.length; i++){
				bounds.push(points[i]);
				b.push(points[i]);
			}
		};	
		// 绘制驾车步行线路
		for (var i = 0; i < planObj.getNumRoutes(); i ++){
			var route = planObj.getRoute(i);
			if (route.getDistance(false) <= 0){continue;}
			addPoints(route.getPath());
			// 驾车线路
			if(route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING){
				map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#0030ff",strokeOpacity:opacity,strokeWeight:6,enableMassClear:true}));
			}else{
			// 步行线路有可能为0
				map.addOverlay(new BMap.Polyline(route.getPath(), {strokeColor: "#30a208",strokeOpacity:0.75,strokeWeight:4,enableMassClear:true}));
			}
		}	
		map.setViewport(bounds);	
		// 终点
		addMarkerFun(results.getEnd().point,1,1);
		// 开始点
		addMarkerFun(results.getStart().point,1,0);
		linesPoints[linesPoints.length] = b;
	}
	initLine();
	setTimeout(function(){
		run();
	},1500);
	</script>